<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表格</title>
</head>
<style>
  table{
    width: 100%;
    /* 表格边框分割方式
       separate 默认，分割开的
      collapse 合并
     */
    border-collapse:collapse;
  }
  table caption{
    font-size: 2em;
    font-weight: 700;
    margin: 1em 0;
  }
  th,td{
    border: 1px solid #ccc;
    text-align: center;
    padding: 20px 0;
  }
  thead tr{
    background-color: #008c8c;
    color: #fff;
  }
  tbody tr:nth-child(odd){
    background-color: #ccc;
  }
  tbody tr:hover{
    background-color: aquamarine;
  }
  tbody tr td:first-child{
    color: blue;
  }
  tfoot td{
    text-align: right;
    padding:  0 30px;
  }
</style>
<body>
  <!-- 浏览器必须要把整个表格读出来才能进行渲染，所以效率比较慢，现在不怎么使用
      表格元素了，就算使用的话也都是在后台使用
  -->
  <table>
      <caption>这是表格标题</caption>
      <thead>
        <!-- tr->table row,一行 -->
        <tr>
          <!-- th -> table head -->
          <th>1</th>
          <th>2</th>
          <th>3</th>
          <th>4</th>
          <th>5</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <!--  rowspan="2" 跨行 -->
          <td >数据1</td>
          <td>数据2</td>
          <td>数据3</td>
          <td>数据4</td>
          <td>数据5</td>
        </tr>
        <tr>
          <td>数据1</td>
          <td>数据2</td>
          <td>数据3</td>
          <td>数据4</td>
          <td>数据5</td>
        </tr>
        <tr>
          <td>数据1</td>
          <td>数据2</td>
          <td>数据3</td>
          <td>数据4</td>
          <td>数据5</td>
        </tr>
        <tr>
          <td>数据1</td>
          <td>数据2</td>
          <td>数据3</td>
          <td>数据4</td>
          <td>数据5</td>
        </tr>
        <tr>
          <td>数据1</td>
          <td>数据2</td>
          <td>数据3</td>
          <td>数据4</td>
          <td>数据5</td>
        </tr>
        <tr>
          <td>数据1</td>
          <td>数据2</td>
          <td>数据3</td>
          <td>数据4</td>
          <td>数据5</td>
        </tr>
        <tr>
          <td>数据1</td>
          <td>数据2</td>
          <td>数据3</td>
          <td>数据4</td>
          <td>数据5</td>
        </tr>
        <tr>
          <td>数据1</td>
          <td>数据2</td>
          <td>数据3</td>
          <td>数据4</td>
          <td>数据5</td>
        </tr>
        <tr>
          <td>数据1</td>
          <td>数据2</td>
          <td>数据3</td>
          <td>数据4</td>
          <td>数据5</td>
        </tr>
        <tr>
          <td>数据1</td>
          <td>数据2</td>
          <td>数据3</td>
          <td>数据4</td>
          <td>数据5</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <!-- 跨列 -->
          <td colspan="5">合计：xxx</td>
        </tr>
      </tfoot>
  </table>
</body>
</html>